import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaAlertPage, WeaRightMenu, WeaTop, WeaSearchGroup, WeaFormItem, WeaTools, WeaNewScroll } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { Button, Spin } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import CrmE9Header from './CrmE9Header';
import CrmE9LeftMenu from './CrmE9LeftMenu';

const getLabel = WeaLocaleProvider.getLabel;

@inject('crmPortalStore')
@observer
export default class CrmPortal extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    // console.log("this.props.children",this.props.children)
    const store = this.props.crmPortalStore;
    const { initResponsed, initSuccessed, initFailedMsg } = store;
    if (initResponsed) {
      if (initSuccessed) {
        return (
          <div className={'crm-e9theme-layout-container'}>
            <div className="crm-e9theme-layout-header">
              <CrmE9Header ecId={`${this && this.props && this.props.ecId || ''}_CrmE9Header@jca85t`} />
            </div>
            <div className="crm-e9theme-layout-content">
              <div id="crm-e9theme-layout-mask" className="crm-e9theme-layout-mask" />
              <div className="crm-e9theme-layout-aside">
                <CrmE9LeftMenu ecId={`${this && this.props && this.props.ecId || ''}_CrmE9LeftMenu@9pzj4f`} />
              </div>
              <div className="crm-e9theme-layout-main">
                <div id="crm-e9theme-layout-route" className="crm-e9theme-layout-route">
                  {this.props.children}
                </div>
              </div>
            </div>
          </div>
        );
      }
      return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@zx4n7v`} ><div style={{ color: '#000' }}>{initFailedMsg}</div></WeaAlertPage>;
    }
    return <div style={{ position: 'absolute', width: '100%', top: '48%', textAlign: 'center' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@l7fjw9`} spinning /></div>;
  }

  componentDidMount() {
    const crmPortalStore = this.props.crmPortalStore;
    crmPortalStore.doInit();
  }

  componentWillUnmount() {
    const { crmPortalStore } = this.props;
    crmPortalStore.doClear();
  }
}
